$(function () {
    var loading = false;
    //分页允许返回的最大条数，超过次数则禁止访问后台
    var maxItems = 999;
    //一页返回的最大条数
    var pageSize = 3;
    //获取店铺列表的URL
    var listUrl = '/o2o/frontend/listshops';
    //获取店铺类别列表以及区域列表的URL
    var searchDivUrl = '/o2o/frontend/listshopspageinfo';
    //页码
    var pageNum = 1;
    //从地址栏URL中尝试获取parent shop category id
    var parentId = getQueryString('parentId');
    var areaId = '';
    var shopCategoryId = '';
    var shopName = '';

    function getSearchDivData() {
        var url = searchDivUrl + '?' + 'parentId=' + parentId;
        $.getJSON(url, function (data) {
            if (data.success) {
                var shopCategoryList = data.shopCategoryList;
                var html = '';
                html += '<a href="#" class="button" data-category-id=""> 全部类别</a>';
                // 遍历店铺类别列表
                shopCategoryList.map(function (item, index) {
                    html += '<a href="#" class="button" data-category-id='
                        + item.shopCategoryId
                        + '>'
                        + item.shopCategoryName
                        + '</a>';
                });
                // 将拼接好的类别标签嵌入前台的html组件里
                $('#shoplist-search-div').html(html);
                var selectOptions = '<option value="">全部街道</option>';
                //获取后台返回过来的区域信息列表
                var areaList = data.areaList;
                //遍历区域信息列表
                areaList.map(function (item, index) {
                    selectOptions += '<option value="'
                        + item.areaId + '">'
                        + item.areaName
                        + '</option>';
                });
                //将标签集添加进area列表里
                $('#area-search').html(selectOptions);
            }
        });
    }

    // 渲染出店铺类别列表以及区域列表以供搜索
    getSearchDivData();

    /**
     * 根据传递进来的查询条件和shopId，获取分页展示的店铺列表信息
     * @param pageSize
     * @param pageIndex
     */
    function addItems(pageSize, pageIndex) {
        // 生成新条目的HTML 拼接处查询的url,赋空值默认就去掉这个条件的限制，有值就代表按照这个条件去进行查询
        var url = listUrl + '?' + 'pageIndex=' + pageIndex + '&pageSize='
            + pageSize + '&parentId=' + parentId + '&areaId=' + areaId
            + '&shopCategoryId=' + shopCategoryId + '&shopName=' + shopName;
        //设定加载符，若还在后台取数据则不能再次访问后台，避免多次重复加载
        loading = true;
        // 访问后台获取相应查询条件下的店铺列表
        $.getJSON(url, function (data) {
            if (data.success) {
                // 获取当前查询条件下的店铺总数
                maxItems = data.count;
                var html = '';
                //遍历店铺列表，拼接处卡片集合
                data.shopList.map(function (item, index) {
                    html += ''
                        + '<div class="card" data-shop-id="' + item.shopId + '">'
                        + '<div class="card-header">' + item.shopName + '</div>'
                        + '<div class="card-content">'
                        + '<div class="list-block media-list">'
                        + '<ul>'
                        + '<li class="item-content">'
                        + '<div class="item-media">'
                        + '<img src="' + item.shopImg + '" width="44">' + '</div>'
                        + '<div class="item-inner">'
                        + '<div class="item-subtitle">' + item.shopDesc + '</div>'
                        + '</div>'
                        + '</li>'
                        + '</ul>'
                        + '</div>'
                        + '</div>'
                        + '<div class="card-footer">'
                        + '<p class="color-gray">'
                        + new Date(item.updateTime).Format("yyyy-MM-dd")
                        + '更新</p>'
                        + '<span>点击查看</span>'
                        + '</div>'
                        + '</div>';
                });
                //将卡片集合添加到目标的html组件里面
                $('.list-div').append(html);
                //获取目前为止已经显示的卡片的数量，包含之前已经加载的
                var total = $('.list-div .card').length;
                //如果总数达到跟按照此查询条件列出来的总数一致，则停止后台的加载
                // if (total >= maxItems) {
                //     // 加载完毕，则注销无限加载事件，以防不必要的加载
                //     $.detachInfiniteScroll($('.infinite-scroll'));
                //     // 删除加载提示符
                //     $('.infinite-scroll-preloader').remove();
                // }

                if (total >= maxItems) {
                    //隐藏提示符
                    $('.infinite-scroll-preloader').hide();
                } else {
                    $('.infinite-scroll-preloader').show();
                }
                //否则页码+1，继续load出新的店铺
                pageNum += 1;
                //加载结束，可以再次进行加载
                loading = false;
                //刷新页面，显示新加载的店铺信息
                $.refreshScroller();
            }
        });
    }

    // 预先加载20条店铺信息
    addItems(pageSize, pageNum);
    //下滑屏幕自动进行分页搜索
    $(document).on('infinite', '.infinite-scroll-bottom', function () {
        if (loading)
            return;
        addItems(pageSize, pageNum);
    });

    //点击店铺的卡片进入店铺的详情页
    $('.shop-list').on('click', '.card', function (e) {
        var shopId = e.currentTarget.dataset.shopId;
        window.location.href = '/o2o/frontend/shopdetail?shopId=' + shopId;
    });

    //选择新的店铺类别之后，重置页码，清空原来的店铺列表，按照新的类别去查询
    $('#shoplist-search-div').on(
        'click',
        '.button',
        function (e) {
            if (parentId) {// 如果传递过来的是一个父类下的子类
                shopCategoryId = e.target.dataset.categoryId;
                //如果之前已经选定了别的category则移除选定效果，改成新选定效果
                if ($(e.target).hasClass('button-fill')) {
                    $(e.target).removeClass('button-fill');
                    shopCategoryId = '';
                } else {
                    $(e.target).addClass('button-fill').siblings()
                        .removeClass('button-fill');
                }
                //由于查询条件改变，清空店铺列表再进行查询
                $('.list-div').empty();
                //重置页码
                pageNum = 1;
                addItems(pageSize, pageNum);
            } else {// 如果传递过来的父类为空，则按照父类查询
                parentId = e.target.dataset.categoryId;
                if ($(e.target).hasClass('button-fill')) {
                    $(e.target).removeClass('button-fill');
                    parentId = '';
                } else {
                    $(e.target).addClass('button-fill').siblings()
                        .removeClass('button-fill');
                }
                $('.list-div').empty();
                pageNum = 1;
                addItems(pageSize, pageNum);
                parentId = '';
            }

        });
    //需要查询的店铺名字发送变化后，重置页码清空原来的店铺列表，按照新的名字去进行查找
    //$('#search').on('input', function (e) {
    $('#search').on('change', function (e) {
        shopName = e.target.value;
        $('.list-div').empty();
        pageNum = 1;
        addItems(pageSize, pageNum);
    });
    //区域信息变化后，重置页码，清空原来的列表，按照新的区域去查询
    $('#area-search').on('change', function () {
        areaId = $('#area-search').val();
        $('.list-div').empty();
        pageNum = 1;
        addItems(pageSize, pageNum);
    });
    //点击后打开右侧栏
    $('#me').click(function () {
        $.openPanel('#panel-left-demo');
    });
    //初始化页面
    $.init();
});
